<template>
  <cl-view-group ref="ViewGroup">
    <template #item-name="{ item }"> {{ item.name }}</template>

    <template #right>
      <cl-crud ref="Crud">
        <cl-row>
          <!-- 刷新按钮 -->
          <cl-refresh-btn/>
          <!-- 新增按钮 -->
          <cl-add-btn/>
          <!-- 批量删除 -->
          <cl-multi-delete-btn/>
          <cl-flex1/>
          <!-- 关键字搜索 -->
          <cl-search-key placeholder="搜索名称"/>
        </cl-row>
        <cl-row>
          <!-- 数据表格 -->
          <cl-table ref="Table" row-key="id" @row-click="onRowClick">
            <template #slot-btn="{ scope }">
              <el-button
                  text
                  bg
                  type="success"
                  v-permission="service.crawler.quota.permission.add"
                  @click="append(scope.row)"
              >新增
              </el-button
              >
            </template>
          </cl-table>
        </cl-row>
        <cl-row>
          <cl-flex1/>
          <cl-pagination/>
        </cl-row>
        <!-- 新增、编辑 -->
        <cl-upsert ref="Upsert"/>
      </cl-crud>
    </template>
  </cl-view-group>
</template>

<script lang="ts" name="crawler-quota" setup>
import { useCool } from "/@/cool";
import { setFocus, useCrud, useTable, useUpsert } from "@cool-vue/crud";
import { useViewGroup } from "/#/view";

const { service } = useCool();

const { ViewGroup } = useViewGroup({
  label: "分组",
  title: "指标定义",
  service: service.crawler.set,
  onSelect(item) {
    refresh({
      groupId: item.id,
      page: 1
    });
  },
  onEdit() {
    return {
      width: "800px",
      props: {
        labelWidth: "60px"
      },
      items: [
        {
          prop: "enName",
          label: "英文描述",
          span: 12,
          required: true,
          component: {
            name: "el-input"
          }
        },
        {
          prop: "name",
          label: "中文描述",
          span: 12,
          required: true,
          component: {
            name: "el-input"
          }
        }
      ]
    };
  }
});

// cl-upsert
const Upsert = useUpsert({
  dialog: {
    width: "800px"
  },

  items: [
    {
      prop: "quotaCode",
      label: "指标编码",
      required: true,
      span: 12,
      component: {
        name: "el-input"
      }
    },
    {
      prop: "quotaName",
      label: "指标名称",
      span: 12,
      component: {
        name: "el-input",
        props: {
          name: "el-input",
        }
      }
    },
    {
      prop: "quotaEsName",
      label: "指标展示名称",
      span: 12,
      component: {
        name: "el-input",
      }
    },
    {
      prop: "scale",
      label: "精度(小数点)",
      span: 12,
      component: {
        name: "el-input"
      }
    },
    {
      prop: "displaySort",
      label: "展示排序",
      span: 12,
      component: {
        name: "el-input"
      }
    },
    {
      prop: "groupId",
      label: "展示分组",
      span: 12,
      component: {
        name: "el-select"
      }
    },
    {
      prop: "brief",
      label: "指标说明",
      component: {
        name: "el-input"
      }
    },
    {
      prop: "remark",
      label: "备注",
      component: {
        name: "el-input",
        props: {
          type: "textarea",
          rows: 4
        }
      }
    }
  ],
  onSubmit(data, {next}) {
    next({
      ...data,
      groupId: ViewGroup.value?.selected?.id
    });
  },
  onOpened(data: T) {
    // 设置权限列表
    service.crawler.set.list().then((res) => {
      Upsert.value?.setOptions(
          "groupId",
          res.map((e) => {
            return {
              label: e.name || "",
              value: e.id
            };
          })
      );
    });
  },
  plugins: [setFocus("name")]
});

// cl-table
const Table = useTable({
  contextMenu: ["refresh"],
  columns: [
    {type: "selection"},
    {
      prop: "quotaCode",
      label: "指标编码",
      width: 180,
      align: "left",
      showOverflowTooltip: true
    },
    {
      label: "是否显示",
      prop: "status",
      align: "left",
      width: 100,
      component: {
        name: "cl-switch",
        modelValue: "status"
      },
    },
    {
      prop: "quotaName",
      label: "指标名称",
      width: 180,
      align: "left",
      showOverflowTooltip: true
    },
    {
      prop: "quotaEsName",
      label: "指标展示名称",
      align: "left",
      width: 180
    },
    {
      prop: "scale",
      label: "精度(小数点)",
      width: 150
    },
    {
      prop: "displaySort",
      label: "排序",
      width: 80
    },
    {
      prop: "brief",
      label: "说明",
      align: "left",
      width: 180
    },
    {
      prop: "remark",
      label: "备注",
      align: "left",
      width: 180
    },
    {
      label: "操作",
      type: "op",
      width: 180,
      buttons: ["edit", "delete"]
    }
  ]
});

// cl-crud
const Crud = useCrud({
  service: service.crawler.quota,
  onRefresh(params, {render}) {
    // console.log(JSON.stringify(params));
    service.crawler.quota
        .page({
          ...params
        })
        .then((res) => {
          // 渲染数据
          // console.log(JSON.stringify(res));
          render(res["list"], {
            size: Number(res["pagination"].size),
            page: Number(res["pagination"].page),
            total: Number(res["pagination"].total)
          });
        });
  }
});

// 刷新
function refresh(params?: any) {
  // console.log(JSON.stringify(params));
  Crud.value?.refresh(params);
}

// 行点击展开
function onRowClick(row: any, column: any) {
  if (column?.property && row.children) {
    Table.value?.toggleRowExpansion(row);
  }
}

// 追加子集
function append(row: any) {
  Crud.value?.rowAppend({
    parentId: row.id,
    orderNum: 1
  });
}
</script>
